<template>
  <div>
    <div class="margin-b" v-if="permission == 3">
      <el-button class='btn' size="mini" @click="allPublish(1)">批量上架</el-button>
      <el-button class='btn' size="mini" @click="allPublish(-1)">批量下架</el-button>
      <el-button class='btn' size="mini" @click="allPublish(2)">批量删除</el-button>
    </div>
    <el-table :data="topicData" row-key="topicId" v-loading="listLoading"
              @selection-change="handleSelectionChange"
              :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
              element-loading-text="加载中..." fit highlight-current-row class="table c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column type="selection" align="center" label="全选">
      </el-table-column>
      <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <div class="clearfix">
              <div class="fl margin-r"><img :src="scope.row.avatar || defultImg" height="68" width="102" alt="" @error="setDefultImg"/></div>
              <div class="fl">
                <div class="margin-t10 font-s14 color-222 text-alignL">{{scope.row.name}}</div>
                <div class="margin-t10 font-s12 color-999 text-alignL">
                  <span>含{{scope.row.hasPaperNum}}套试卷</span><span class="color-409">|</span><span class="c-fc-blue">&yen{{scope.row.price}}</span></div>
              </div>
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center" width="140" label="发布时间">
          <template slot-scope="scope">
            <span>{{scope.row.createdAt}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="包含试卷(套)">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.hasPaperNum}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
          <el-table-column width="70" align="center" label="前台排序">
            <template slot-scope="scope">
              <span>{{scope.row.sort}}</span>
            </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="已售出(件)">
            <template slot-scope="scope">
              <span>{{scope.row.subscribers}}</span>
            </template>
        </el-table-column>
        <el-table-column width="70" align="center" label="是否上架">
            <template slot-scope="scope">

    <span v-if="scope.row.isGrounding === 1">是</span>
          <span v-else>否</span>

            </template>
        </el-table-column>
          <el-table-column  width="180" align="center" label="操作">
            <template slot-scope="scope">
              <router-link :to="{path:'/testManage/paperDetail/' + scope.row.topicId}">
                <b class="">内容管理</b>
              </router-link>
              <span class="color-409" v-if="permission == 3">|</span>
                <router-link v-if="permission == 3" :to="{path:'/testManage/editTopics/' + scope.row.topicId}">
                    <b>编辑</b>
                </router-link>
              <span class="color-409" v-if="permission == 3">|</span>

              <b class="" v-if="permission == 3" @click="openDelete(scope.$index,scope.row.topicId)">删除</b>

                </template>
        </el-table-column>
      </el-table>
    <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getTopicList,
  deleteTopic,
  toPublish
} from '@/api/topic'
import defultImg from '@/assets/defult270.png'
export default {
  props: ['permission', 'listQuery', 'topicData'],
  data() {
    return {
      defultImg,
      topicIdArr: [],
      listLoading: false, // 加载时转圈
      multipleSelection: []
    }
  },
  created() {

  },
  methods: {
    getList() {
      this.listLoading = true
      getTopicList(this.listQuery)
        .then(res => {
          console.log('专题', res.data.data)
          this.topicData = res.data.data.topicList.data
          this.listQuery.total = res.data.data.topicList.total
          this.topicUrl = res.data.data.topicUrl
          this.listLoading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    listenCall(methodsWords) {
      // 监听点击了哪个菜单
      console.log('methodsWords', methodsWords)
      this[methodsWords]() // 调用对应方法
    },
    openDelete(index, id) {
      console.log(id)
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除数据执行的方法
        deleteTopic(id)
          .then(res => {
            console.log(id)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
            //              this.tableData.splice(index, 1)
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    linkToEdit(id) {
      //      this.$router.push({ path: `/testManage/editTopics/${id}` })
      this.$router.push({
        path: '/testManage/editTopics/${id}',
        query: { topicId: id }
      })
    },
    linkToAdd() {
      this.$router.push({ path: `/testManage/createTopics` })
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      // 切换当前页码的方法
      this.listQuery.page = val
      this.getList()
    },
    handleSelectionChange(val) {
      // 复选框选择操作 将topicId存进数组 实时变化
      this.multipleSelection = val
      this.topicIdArr = []
      val.forEach((row, index) => {
        this.topicIdArr.push(row.topicId)
      })
    },
    allPublish(val) {
      var tip
      if (val == 1) {
        tip = '上架'
      } else if (val == -1) {
        tip = '下架'
      } else {
        tip = '删除'
      }
      if (this.topicIdArr.length == 0) {
        this.$message({
          type: 'error',
          message: '至少选择一条数据'
        })
        return
      }
      this.$confirm('确定' + tip + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行将复选框选中的专题全部上架
        var data = { topicIdArr: this.topicIdArr, type: val }
        toPublish(data)
          .then(res => {
            this.$message({
              type: 'success',
              message: tip + '成功!'
            })
            this.getList()
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    setDefultImg(e) {
      e.target.src = defultImg
    }
  }
}
</script>
<style scoped>

</style>
